<template>
    <div>
    <el-card shadow="never" class="border-0">
        <template #header>
            <div class="flex justify-between">
                <span class="text-sm">{{ title }}</span>
                <el-tag  type="danger" effect="plain">
                    {{ tip }}
                </el-tag>
            </div>
        </template>
         <el-row :gutter="20">
            <el-col :span="6" :offset="0" v-for="(item,index) in btn" :key="index">
               <el-card shadow="hover" class="border-0 bg-gray-100" >
               <div class="flex justify-center items-center flex-col">
                    <span class=" text-xl mb-2">{{item.value}}</span>
                    <span class="text-xs text-gray-500">{{item.label}}</span>
               </div>   
               </el-card>
            </el-col>
         </el-row>
    </el-card>
</div>
</template>
<script setup>
  defineProps({
    title:String,
    tip:String,
    btn:Array
  })
</script>